<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		.wrap{
			position: relative;
			width: 200px;
			top: 50px;
			left: 50px;
		}
		ul{
			padding: 15px 0;
			margin: 9px 0;
			list-style: none;
			background-color: #6c6669;
			color: #fff;
			border-right-width: 0;
		}
		li{
			display: block;
			height: 30px;
			line-height: 30px;
			padding-left: 12px;
			cursor: pointer;
			font-size: 14px;
			position: relative;
		}
		li.active{
			background: #999395;
		}
		li:hover{
			background-color: #f7f7f7;
			color:red;
		}


		#sub{
			width: 600px;
			position: absolute;
			border: 1px solid #f7f7f7;
			background: #f7f7f7;
			box-shadow: 2px 0 5px rgba(0, 0, 0, .3);
			left: 200px;
			top: 0;
			box-sizing: border-box;
			margin: 0;
			padding: 10px;
		}
		.sub_content a{
			font-size: 12px;
			color: #666;
			text-decoration: none
		}
		.sub_content dd a{
			border-left: 1px solid #e0e0e0;
			padding: 0 10px;
			margin: 4px 0;
		}
		.sub_content dl {
			overflow: hidden;
		}
		.sub_content dt{
			float: left;
			width: 70px;
			font-weight: bold;
			clear: left;
			position: relative;
		}
		.sub_content dd{
			float: left;
			margin-left: 5px;
			border-top: 1px solid #eee;
			margin-bottom: 5px;
		}
		.sub_content dt i{
			width: 4px;
			height: 14px;
			font: 400 9px/14px consolas;
			position: absolute;
			right: 5px;
			top: 5px;
		}

		.none{
			display: none;
		}
	</style>
</head>
<body>
<div class="wrap" id="menu">
	<ul>
		<li data-id="a">
			<span>家用电器</span>
		</li>
		<li data-id="b">
			<span>手机/运营商/数码</span>
		</li>
		<li data-id="c">
			<span>电脑办公</span>
		</li>
	</ul>
	<!-- 右侧弹出层 start-->
	<div id="sub" class="none">
		<!-- 	数据项a start -->
		<div id="a" class="sub_content ">
			<dl>
				<dt>
					<a href="#">电视<i>></i></a>
				</dt>
				<dd>
					<a href="#">合资品牌</a>
					<a href="#">国产品牌</a>
					<a href="#">互联网品牌</a>
				</dd>
			</dl>
			<dl>
				<dt>
					<a href="#">空调<i>></i></a>
				</dt>
				<dd>
					<a href="#">壁挂式空调</a>
					<a href="#">柜式空调</a>
					<a href="#">中央空调</a>
					<a href="#">空调配件</a>
				</dd>
			</dl>
			<dl>
				<dt>
					<a href="#">洗衣机<i>></i></a>
				</dt>
				<dd>
					<a href="#">滚筒洗衣机</a>
					<a href="#">洗烘一体机</a>
					<a href="#">波轮洗衣机</a>
					<a href="#">迷你洗衣机</a>
					<a href="#">洗衣机配件</a>
				</dd>
			</dl>
			<dl>
				<dt>
					<a href="#">冰箱<i>></i></a>
				</dt>
				<dd>
					<a href="#">对门</a>
					<a href="#">对开门</a>
					<a href="#">三门</a>
					<a href="#">双门</a>
					<a href="#">冷柜/冰吧</a>
					<a href="#">酒柜</a>
					<a href="#">冰箱配件</a>
				</dd>
			</dl>
		</div>
		<!-- 	数据项a end -->
	</div>
	<!-- 右侧弹出层 end-->
</div>
<script src="jquery/jquery-3.5.0.js"></script>
<script>
	$(document).ready(function(){
		function initDom(){
			$.ajax({
				type: "get",
				dataType:"json",//服务器响应的数据类型
				url: "<%=request.getServletContext().getContextPath()%>/mall?method=getMenuTypeListJson",//接口路径
				data: {"uname":"aa","oper":"ajaxlogin"},//传给服务器的数据
				success: function(data){
					var productTypeList = data.productTypeList;
					var liHtml = '';
					if(productTypeList){
						$.each(productTypeList,function(i,item){
							liHtml += '<li data-id="menu'+i+'">';
							liHtml += '<span>'+item.name+'</span>';
							liHtml += '</li>';
						})
					}
					$("#menu ul").html(liHtml);
					debugger
					console.info(liHtml)
				},error:function(e){
					console.info(e);
				}
			});
		}
		//初始化节点
		initDom();
		//菜单逻辑控制
		var data_id;
		$("#menu").on("mouseenter",function(){
			//弹出层显示
			var menuHeight = $(this).innerHeight();
			$("#sub").css({"min-height":menuHeight+"px"});
			$("#sub").show("fast");
		}).on("mouseleave",function(){
			//弹出层显示
			$("#sub").hide("fast");
		});
		$("#sub").on("mouseenter",function(){
			//弹出层显示
			if(data_id){
				$("#sub").show();
				$("#"+data_id).show();
				console.info("sub enter data_id show"+data_id)
			}
		});
		$("#menu ul li").on("mouseenter",function(){
			//判断是否是同个li的菜单，是的话就不重新刷新展示
			var this_data_id = $(this).attr("data-id");
			if(data_id){
				if(this_data_id == data_id){
					return;
				}
			}
			//当前所在的分类对象
			data_id = $(this).attr("data-id");
			var liTop = $(this).offset().top - 2*$(this).outerHeight();
			$("#sub").css({
				top: liTop + 'px'
			});
			$("#sub").show();
			//绑定的具体数据项
			$("#sub .sub_content").hide();
			$("#"+data_id).show("fast");
		});
	});
</script>


</body>
</html>
